<script setup>
import { propTypes } from '@/utils/propTypes'
import { computed, unref, ref, onUnmounted } from 'vue'

const props = defineProps({
  start: propTypes.string.def('08:00:00'),
  end: propTypes.string.def('22:00:00'),
  cur: propTypes.string.def('')
})

const str2second = (str = '') => {
  return str
    .split(':')
    .map((t) => Number(t))
    .reverse()
    .reduce((t, c, i) => {
      if (i === 0) {
        t += c
      } else if (i === 1) {
        t += c * 60
      } else if (i === 2) {
        t += c * 60 * 60
      }
      return t
    }, 0)
}

const second2str = (second = 0) => {
  return (
    `${Math.floor(second / 3600)}`.padStart(2, '0') +
    ':' +
    `${Math.floor((second % 3600) / 60)}`.padStart(2, '0') +
    ':' +
    `${second % 60}`.padStart(2, '0')
  )
}

const start = unref(props.start)
const end = unref(props.end)
const cur = unref(props.cur)
const startSecond = str2second(start)
const endSecond = str2second(end)
let curSecond = ref(str2second(cur || start))

const percentage = computed(() => {
  return ((curSecond.value - startSecond) * 100) / (endSecond - startSecond)
})

const interval = setInterval(() => {
  curSecond.value += 1
}, 1000)

onUnmounted(() => {
  if (interval) {
    clearInterval(interval)
  }
})
</script>
<template>
  <div>
    <el-progress :text-inside="true" :stroke-width="20" :percentage="percentage">
      <span>{{ second2str(curSecond) }}</span>
    </el-progress>
  </div>
</template>
